<template>
  <div class="receiveDetail">
    <div class="DingDanDetail">
      <div class="icon"><img src="@/assets/images/asset/receive.png" width="100%" height="100%" alt="" /></div>
      <div class="text">{{info.userName || info.userId}} 给 {{info.borrowUserName || info.borrowUserId}} 的借据单</div>
      <div class="orderID">单号：{{info.orderId}}</div>
    </div>
    <loading :show="isLoading"></loading>
    <div class="content">
      <div class="top_box">
        <div class="left_text">借据信息</div>
        <div class="tag" v-if="info.status == 1">待接收</div>
        <div class="tag" v-if="info.status == 2">已接收</div>
        <div class="tag" v-if="info.status == 3">归还待确认</div>
        <div class="tag" v-if="info.status == 4">已归还</div>
      </div>
      <div class="bottom_box">
        <div class="label">
          <span class="title">出借人</span>
          <span class="name">{{ info.userName || info.userId}}</span>
        </div>
        <div class="label">
          <span class="title">借用人</span>
          <span class="name">{{ info.borrowUserName || info.borrowUserId }}</span>
        </div>
        <div class="label">
          <span class="title">借用期限</span>
          <span class="name">{{ info.borrowTime || "未设置" }}</span>
        </div>
        <div class="label">
          <span class="title">借出时间</span>
          <span class="name">{{ info.createTime || "无"}}</span>
        </div>
        <div class="label">
          <span class="title">归还时间</span>
          <span class="name">{{ info.backConfirmTime || "未归还"}}</span>
        </div>
        <!-- <div class="btn_label" v-if="info.status == 1  && !noBtn">
          <x-button class="Detail-btn"  @click.native="DetailBtn()">拒收</x-button>
          <x-button class="confirm-btn" @click.native="confirmReceive()">开始接收</x-button>
        </div> -->
        <div class="btn_label" v-if="!noBtn">
          <x-button class="confirm-btn" v-if="info.status == 1 || info.status == 3" @click.native="confirmReceive()">开始接收</x-button>
          <x-button class="confirm-btn" v-if="info.status == 2" @click.native="returnBtn()">归还</x-button>
        </div>
      </div>
    </div>
    <div class="count">资产明细（1件）</div>

    <div class="list">
      <template v-if="list.length>0">
        <div class="item" v-for="(item, index) in list" :key="index" @click="toLog(item)">
          <span class="title_name">{{index+1}} . {{ item.assetName }}<x-icon type="ios-arrow-right" size="30"></x-icon></span>
          <div class="label">
            <span class="title">资产数字ID</span>
            <span class="name">{{ item.assetCode }}</span>
          </div>
          <div class="label">
            <span class="title">资产分类</span>
            <span class="name">{{ item.className }}</span>
          </div>
          <div class="label">
            <span class="title">品牌型号</span>
            <span class="name">{{ item.tags }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import AssetApi from "@/api/asset.js";
import { XButton, Loading } from "vux";
import { dateFormat } from "@/utils/utils.js";
export default {
  components: {  XButton, Loading },
  data() {
    return {
      count: 0,
      list: [],
      info: {},
      borrowTime:'',
      indate:'',
      noBtn:false,
      isLoading:false
    };
  },
  mounted() {
    if(this.$route.query.noBtn)this.noBtn = this.$route.query.noBtn
    this.getList();
  },
  methods: {
    // 归还
    returnBtn(){
      let _this = this
      _this.$vux.confirm.show({
        title: "确认归还",
        content: "是否确认归还",
        onConfirm() {
          _this.isLoading = true
          let params = {
            orderIds : _this.item.orderId
          }
          AssetApi.giveBack(params).then((res) => {
            _this.isLoading = false
            if (res.code == "0000") {
              _this.$vux.toast.show({
                text: "资产已提交归还",
              });
              _this.getList()
            }else{
              this.$vux.toast.show({
                text: res.message,
                type: "warn",
              });
            }
          });
        },
      });

    },
    toLog(item){
      this.$router.push({ name: 'log', params: { id: item.assetId} });
    },
    confirmReceive() {
      let _this = this
      _this.$vux.confirm.show({
        title: "确认接收",
        content: "确认接收后不可更改",
        onCancel() {},
        onConfirm() {
          _this.isLoading = true
          let params = {
            orderId: _this.info.orderId
          }
          AssetApi.orderConfirm(params).then((res) => {
            _this.isLoading = false
            if (res.code == "0000") {
              _this.$vux.toast.show({
                text: "资产接收确认成功",
              });
              _this.getList()
            }
          });
        },
      });
    },
    //  获取信息
    getList() {
      let _params = {
        orderId: this.$route.query.orderId
      };
      AssetApi.findBorrowDetail(_params).then((res) => {
        if (res.code == "0000") {
          this.info = res.data
          if (this.borrowTime)this.borrowTime = dateFormat('YYYY-MM-DD',res.data.borrowTime)
          if (this.indate)this.indate = dateFormat('YYYY-MM-DD',res.data.indate)
          this.list = res.data.assetList
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.DingDanDetail {
  width: 100%;
  height: 177px;
  padding-top: 10px;
  background-color: #cea669;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    // border: 1px solid rgb(255, 255, 255);
    background-color: #cea669;
  }
  .text{
    font-size: 18px;
  }
  .orderID{
    font-size: 14px;
  }
  div{
    margin: 3px 0;
    color: #fff;
  }
}
.content{
  box-sizing: border-box;
  margin: -56px 10px 0;
  // height: 320px;
  background-color: #fff;
  border-radius: 8px;
  padding: 0 10px;
  .top_box{
    height: 40px;
    border-bottom: 1px solid #c7c5c5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    font-size: 16px;
    letter-spacing: 1.5px;
    .tag{
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      font-size: 14px;
      width: 84px;
      height: 30px;
      background-color: #f1f1f1;
      color: #0e60e7;
    }
  }
  .bottom_box{
    padding: 10px 8px;
    .label {
      display: flex;
      justify-content: flex-start;
      height: 30px;
      line-height: 30px;
      color: rgb(127, 127, 127);

      .title {
        display: inline-block;
        width: 120px;
      }
      .name{
        color: black;
      }
    }
    .btn_label{
          width: 100%;
          display: flex;
          justify-content: center;
          height: 32px;
          line-height: 30px;
          margin-top: 15px;
          padding: 2px 0;
          .Detail-btn{
            border-radius: 15px;
            margin: 0 20px;
            padding: 0;
            width: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            background-color: #fff;
            border: 1px solid #9d9b9b;
          }
          .confirm-btn{
            border-radius: 15px;
            margin: 0 20px;
            padding: 0;
            width: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #fff;
            background-color: rgb(14, 96, 231);
            border: 1px solid rgb(14, 96, 231);
          }
        }
  }
}
.count {
  margin: 10px 20px;
}
.list {
  height: auto;
  background: #f1f1f1;
  padding: 10px;
  .item {
    padding: 5px 15px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    position: relative;
    .title_name{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .label {
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      height: 25px;
      line-height: 25px;
      color: rgb(127, 127, 127);
      .title {
        display: inline-block;
        width: 100px;
      }
    }
  }
}
.receiveDetail {
  width: 100%;
  // padding: 10px;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: 80px;
  background: #f1f1f1;
  min-height: 100vh;
}
</style>
